<script setup>
import FullScreen from '../components/FullScreen.vue';
import Temp from '../components/Temp.vue';
import {ref, nextTick} from 'vue';

const props =  defineProps({
msg: {
    type: String,
    required: true
},
data: {
    type: Object,
    required: false,
    default (){
    return [
        {title: '石油天然气', url: '/',image:'/src/assets/Frame_ico_5.svg',image_white:'/src/assets/Frame_ico_5_white.svg',headpic:'/src/assets/fimage5.jpg',infor:'冶金行业常用阀门的标准 截止阀是常用的阀门类型,用于截断管道中的流体。在冶金行业中,截止阀多采用国家标准GB、行业标准JB、美国标准API、英国标准BS、德国标准DIN等标准。通常情况下,压力等级为PN10、PN16、PN25、PN40等。 球阀是利用球体转动实现开关的一种阀门，广泛应用于冶金行业的输送管道和设备上。冶金行业常用阀门的标准 截止阀是常用的阀门类型,用于截断管道中的流体。在冶金门，广泛应用于冶金行业的输送管道和设备上。'},
        {title: '冶金行业', url: '/',image:'/src/assets/Frame_ico_3.svg',image_white:'/src/assets/Frame_ico_3_white.svg',headpic:'/src/assets/fimage3.jpg',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        {title: '精细化工', url: '/',image:'/src/assets/Frame_ico_2.svg',image_white:'/src/assets/Frame_ico_2_white.svg',headpic:'/src/assets/fimage2.jpg',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        {title: '电力行业', url: '/',image:'/src/assets/Frame_ico_1.svg',image_white:'/src/assets/Frame_ico_1_white.svg',headpic:'/src/assets/fimage1.jpg',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
        {title: '食品医药', url: '/',image:'/src/assets/Frame_ico_4.svg',image_white:'/src/assets/Frame_ico_4_white.svg',headpic:'/src/assets/fimage4.jpg',infor:'海洋石油平台控制阀必须满足一些特殊的要求以适应恶劣的工作环境。首先，它们需要能够在高盐度、高压和高温的环境下稳定工作啊...'},
    ]
    }
}
})

const model = defineModel();

model.value = 0;
function changeModel(params) {
model.value = params;
}

function bindleUpDown(params){
    let currented = model.value + params;
    let leng = props.data.length;
    if(currented<0)currented = leng-1;
    if(currented>=leng)currented = 0;
    changeModel(currented);
}
  const count = ref(0);
  
  import { Swiper } from 'swiper'; 
  import 'swiper/css';
  import 'swiper/css/pagination';
  const current = defineModel('current');
  current.value = 1
  let onSlidePrev = ()=>{};
  let onSlideNext = ()=>{};
  let onSlideTo = ()=>{};
  let bindleChangCurrent = (index)=>{
    current.value = index + 1;
  }
  nextTick(() => {
    // const swiper = honorSwiper.$swiper;
    // honorSwiper.navigation.init();
    let thumbsCut = isMobile()?3:5;
    let serviceThumbsSwiper = new Swiper('#serviceThumbsSwiper',{
        slidesPerView: thumbsCut
    })
    var mySwiper = new Swiper('#serviceSwiper', {
      direction:'horizontal',// 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      slidesPerView: 1,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination-services'
      },
            
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next-services',
        prevEl: '.swiper-button-prev-services',
      },
      thumbs:{
        swiper: serviceThumbsSwiper
      }
    })
    onSlidePrev = ()=>{
      mySwiper.slidePrev();
      bindleChangCurrent(mySwiper.realIndex);
    }
    onSlideNext = ()=>{
      mySwiper.slideNext();
      bindleChangCurrent(mySwiper.realIndex);
    }

    onSlideTo = (index)=>{
        mySwiper.slideTo(index);
        bindleChangCurrent(mySwiper.realIndex);
    }

    function isMobile() {
      const mobileWidthThreshold = 768; // 设定移动端宽度阈值为768px
      // console.log('window.innerWidth:',window.innerWidth);
      return window.innerWidth <= mobileWidthThreshold;
    }
  });


</script>

<template>
    <Temp lit=[]>
        <div class="clear w-full h-screen justify-center flex p-0 m-0 relative bg-center bg-no-repeat bg-cover wen-screen mobile:h-auto mobile:pt-24">
            <div class="container w-full flex">
                <div class="w-full h-auto self-center bg-no-repeat wow animate__animated animate__pushOnRight timing">
                    <div class="flex px-6 mb-[80px] mobile:mb-8">
                        <span class="wen-index-title">应用领域</span>
                    </div>
                    <div class="w-full px-6 self-center mx-auto mt-[80px] mobile:my-6">
                        <div class="swiper" id="serviceThumbsSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item, index) in data">
                                    <div class="w-full px-6 text-underint cursor-pointer flex items-center place-content-center border-[#0000] border-b-2 hover:text-dominant hover:border-dominant mobile:p-0 mobile:pr-4" @click="onSlideTo(index)" :class="{active:index==model}">
                                        <h3 class="line-clamp-3 text-3xl mt-6 mobile:text-sm mobile:h-auto mobile:mt-0 leading-loose mobile:text-center whitespace-nowrap"><img class="inline-block wen-svg w-10 mr-2 mobile:w-5 mobile:wen-svg-20" :src="item.image" ><span class="leading-loose mobile:text-base">{{ item.title }}</span></h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex bg-dominant relative mt-[32px] mobile:h-[282px]">
                        <div class="swiper" id="serviceSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item, index) in data">
                                    <div class="flex h-full">
                                        <div class="w-1/2 h-full mobile:w-full mobile:z-10 mobile:text-white" >
                                            <div class="w-full p-12 text-white overflow-hidden text-center bg-[url('{{/src/assets/Frame_ico_3_white.svg}}')] bg-cover bg-no-repeat bg-center relative mask  mobile:hidden" :style="'background-image:url('+item.image_white+')'">
                                                <div class="w-full z-[1] grid text-white">
                                                    <div class="mx-auto inline w-20 h-20 overflow-hidden"><img class="mx-auto wen-svg wen-svg-80 w-20 h-20" :src="item.image" ></div>
                                                    <p class="text-4xl z-[1] leading-relaxed mobile:text-sm">{{item.title}}</p>
                                                </div>
                                            </div>
                                            <div class="w-full p-6 mobile:py-8 bg-undergray h-[inherit] mobile:bg-black/60">
                                                <p class="text-lg line-clamp-[8] h-48 mb-12 leading-normal mobile:mb-2 mobile:text-sm mobile:h-auto mobile:h-full mobile:text-white/80"><a :href="item.url">{{ item.infor }}</a></p>
                                            </div>
                                        </div>
                                        <div class="w-2/3 relative overflow-hidden mobile:absolute mobile:w-full mobile:h-full" >
                                            <div class="w-full h-full ilmobile:h-[630px]">
                                                <img class="wen-icon" :src="item.headpic" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-pagination swiper-pagination-services"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Temp>
</template>
<style scoped>
ul.grid li.active{
  border-color: #2F3767;
  color: #2F3767
}
.mask::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2F3767cc;
    pointer-events: none;
}
</style>